<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组建化应用构建</title>
</head>
<body>
	<ol>
	<!-- 创建一个 todo-item 组建的实例 -->
		<todo-item></todo-item>
	</ol>
	<div id="app-7">
		<ol>
			<!-- 现在我们为每个todo-item提供待办对象 -->
			<!-- 待办对象是变量，即其内容可以是动态的 -->
			<todo-item v-for = "item in groceryList" v-bind:todo="item"></todo-item>
		</ol>
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
          // 定义名为 todo-item 的新组件
	Vue.component('todo-item',{
		template: '<li>这是个待办项</li>'
	})
	// Vue.component('todo-item',{
		// todo-item 组建现在接受一个。
		// “prop”，类似于一个自定义属性。
		// 这个属性名为todo。
		// props: ['todo'],
		// template: '<li>{{todo.text}}</li>'
	// })
	Vue.component('todo-item',{
		props: ['todo'],
		template: '<li>{{todo.text}}</li>'
	})
	var app7 = new Vue({
		el: '#app-7',
		data: {
			groceryList: [
                                      { text: '蔬菜' },
                                      { text: '奶酪' },
                                      { text: '其他吃的东西' }    
			]
		}
	})
</script>
</html>